﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" th:href="@{/layui/cssLayui.css}">
    <th:block th:include="include::header('首页')" />
    <script th:src="@{/febs/js/sypq/home/echarts.min.js(v=1)}"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <table style="width:100%;height:100%;">
        <tr>
            <td colspan="2">
                <div class="panel-body">
                    <div class="dashboard-stats tooltip">
                    	<span class="tooltiptext"></span>
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">[[${taskdata.t1}]]/[[${taskdata.proj}]]</h2>
                            <h5>待审批任务/项目</h5>
                            <div class="stat-icon">
                                <i class="fa fa-stamp fa-3x" style="font-size:3em !important;"></i>
                            </div>
                        </div>
                    </div>

                    <div class="dashboard-stats tooltip">
                    	<span class="tooltiptext"></span>
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">[[${taskdata.t2}]]/[[${taskdata.proj}]]</h2>
                            <h5>已审批任务/项目</h5>
                            <div class="stat-icon">
                                <i class="fa fa-circle-check fa-3x" style="font-size:3em !important;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats tooltip">
                    	<span class="tooltiptext"></span>
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">[[${taskdata.t3}]]/[[${taskdata.proj}]]</h2>
                            <h5>已排期任务/项目</h5>
                            <div class="stat-icon">
                                <i class="fa fa-chart-gantt fa-3x" style="font-size:3em !important;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats tooltip">
                    	<span class="tooltiptext"></span>
                        <div class="dashboard-stats-item" style="background-color: #6bafbd;">
                            <h2 class="m-top-none">[[${taskdata.t4}]]/[[${taskdata.proj}]]</h2>
                            <h5>试验中任务/项目</h5>
                            <div class="stat-icon">
                                <i class="fa fa-hourglass-half fa-3x" style="font-size:3em !important;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="dashboard-stats tooltip">
                    	<span class="tooltiptext"></span>
                        <div class="dashboard-stats-item" style="background-color: #6bafbd; margin-right: 0px;">
                            <h2 class="m-top-none">[[${taskdata.t5}]]/[[${taskdata.proj}]]</h2>
                            <h5>已完成任务/项目</h5>
                            <div class="stat-icon">
                                <i class="fa fa-flag fa-3x" style="font-size:3em !important;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="panel-body" id="using"></div>
              </td>
        </tr>
        <tr>
            <td width="50%">
                <div style="position: absolute;display: inline-block;left:25%;z-index:9999999;" class="tooltip">
<!--                    <span class="tooltiptext">选择查看不同资源的预约天数情况</span>-->
                    <select  id="resource"></select>
                </div>
                <div style="position: absolute;display: inline-block;left:32%;z-index:9999999;" class="tooltip">
<!--                    <span class="tooltiptext">切换X轴显示维度</span>-->
                    <select  id="weidu">
                        <option  value="week" selected>周视图</option>
                        <option  value="month">月视图</option>
                    </select>
                </div>
                <div id="myChart001" style="width:100%;height:350px;"></div>
            </td>
            <td>
                <div id="myChart003" style="width: 100%; height: 350px;"></div>
                <div id="myChart002" style="width: 100%; height: 350px;display:none"></div>
            </td>
        </tr>

    </table>
    <script type="text/javascript">

        // 历史工作量统计
        var myChart002 = echarts.init(document.getElementById('myChart002'));
        // 指定图表的配置项和数据
        var option = {
            color: ['#00BFFF', '#DAA520'],
            title: {
                text: '历史工作量统计'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                x: 'center',
                y: 'top',
                data: ['任务', '项目']
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2023/12', '2024/01', '2024/02', '2024/03', '2024/04', '2024/05', '2024/06', '2024/07', '2024/08', '2024/09', '2024/10', '2024/11']
            },
            yAxis: [{
                type: 'value',
                min: 0,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                min: 0,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: colors[1]
                    }
                },
                axisLabel: {
                    formatter: '{value} '
                }
            }],
            series: [
                {
                    name: '任务',
                    type: 'line',
                    data: [50, 56, 33, 43, 56, 44, 65, 44, 45, 65, 74, 35],
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    }
                },
                {
                    name: '项目',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [15, 20, 13, 18, 20, 22, 33, 23, 11, 22, 35, 8],
                    label: {
                        normal: {
                            show: true,
                            position: 'top'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart002.setOption(option);
    </script>
    <th:block th:include="include::foot"/>
    <script th:src="@{/febs/js/sypq/home/homeList.js(v=1)}"></script>
    <script data-th-inline="javascript">
        var resourceListData = [[${resourceList}]];
    </script>
</body>
</html>
<style type="text/css">
    .tooltip {
        position: relative;
        display: inline-block;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 140%;
        background-color: gray;
        text-align: left;
        text-indent: 2em;
        border-radius: 0.5em;
        padding: 0.2em 0.1em;
        color: #ff0;
        top: 1.5em;
        left: 1em;
        /* 定位 */
        position: absolute;
        z-index: 1;
    }
    /*.tooltip:hover .tooltiptext {*/
    /*    visibility: visible;*/
    /*}*/
    .panel-body {
        padding: 10px;
        padding-bottom: 0px;
    }

    .panel-body ul {
        overflow: hidden;
        padding: 0;
        margin: 0px;
        margin-top: -5px;
    }

    .panel-body ul li {
        line-height: 27px;
        list-style-type: none;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .panel-body ul li .time {
        color: #a1a1a1;
        float: right;
        padding-right: 5px;
    }

    .dashboard-stats {
        float: left;
        width: 20%;
    }
    .dashboard-stats2 {
        float: left;
        width: 25%;
    }

    .dashboard-stats-item {
        position: relative;
        overflow: hidden;
        color: #fff;
        cursor: pointer;
        height: 80px;
        margin-right: 25px;
        margin-bottom: 10px;
        padding: 20px 20px;
    }

    .dashboard-stats-item .m-top-none {
        margin-top: 2px;
    }

    .dashboard-stats-item h2 {
        font-size: 35px;
        font-family: inherit;
        line-height: 1.1;
        font-weight: 500;
    }

    .dashboard-stats-item h5 {
        font-size: 15px;
        font-family: inherit;
        margin-top: 3px;
        line-height: 1.1;
    }
    .dashboard-stats-item h52 {
        font-size: 18px;
        font-family: inherit;
        margin-top: 3px;
        line-height: 1.1;
    }

    .dashboard-stats-item .stat-icon {
        position: absolute;
        top: 25px;
        right: 10px;
        font-size: 20px;
        opacity: .3;
    }

    .dashboard-stats-item .stat-icon2 {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 30px;
        opacity: .3;
    }

    .dashboard-stats i.fa.stats-icon {
        width: 50px;
        padding: 20px;
        font-size: 50px;
        text-align: center;
        color: #fff;
        height: 50px;
        border-radius: 10px;
    }

    .dashboard-stats2 i.fa.stats-icon {
        width: 50px;
        padding: 20px;
        font-size: 50px;
        text-align: center;
        color: #fff;
        height: 50px;
        border-radius: 10px;
    }
</style>
